<template>
  <div style="padding: 12px 0">
    <div style="padding: 24px; padding-bottom: 0">
      <el-card style="padding-top: 18px" shadow="hover">
        <LoadingBar @refresh="reIluminateCharts" />
      </el-card>
    </div>
    <div style="padding: 24px" v-if="source != null">
      <el-card class="card-wrapper" shadow="hover">
        <el-row :gutter="48">
          <el-col :sm="24" :md="12">
            <OfficeCompareChart v-if="loadingSequence[0]" />
          </el-col>
          <el-col :sm="24" :md="12">
            <SectorRatioChart v-if="loadingSequence[1]" />
          </el-col>
          <el-col :span="24">
            <SectorHistoryChart v-if="loadingSequence[2]" />
          </el-col>
          <el-col :span="24">
            <PersonalHoursChart v-if="loadingSequence[3]" />
          </el-col>
          <el-col :span="24">
            <SourceTable v-if="loadingSequence[4]" />
          </el-col>
        </el-row>
      </el-card>
    </div>
    <AlertView v-if="showAlert" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
// import dayjs from "dayjs";
// import setPromiseInterval, { clearPromiseInterval } from "set-promise-interval";
import useHourStore from "@/store/hour.js";
import LoadingBar from "./loadingBar.vue";
import OfficeCompareChart from "./officeCompare.vue";
import SectorHistoryChart from "./sectorHistory.vue";
import SectorRatioChart from "./sectorRatio.vue";
import PersonalHoursChart from "./personalHours.vue";
import SourceTable from "./sourceTable.vue";
import AlertView from "@/components/Alert/index.vue";
import useSeatStore from "@/store/seat.js";

const seatStore = useSeatStore();
const showAlert = computed(() => !seatStore.isServiceAvailable);

const hourStore = useHourStore();
const source = computed(() => hourStore.generalViewConfigs.source);
const loadingSequence = ref(new Array(false, false, false, false, false));

const reIluminateCharts = () => {
  for (let i = 0; i < loadingSequence.value.length; i++) {
    loadingSequence.value[i] = false;
  }
  setTimeout(() => iluminateCharts(), 300);
};

const iluminateCharts = () => {
  if (source != null) {
    let index = loadingSequence.value.indexOf(false);
    if (index > -1) {
      loadingSequence.value[index] = true;
      setTimeout(() => iluminateCharts(), 300);
    }
  }
};

onMounted(() => {
  iluminateCharts();
});
</script>

<style scoped>
.horizontal-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.horizontal-wrapper > * {
  /* margin-right: max(10vw, 72px); */
  margin-right: 72px;
}
.horizontal-wrapper > last-child {
  margin-right: 0;
}
.vertical-wrapper {
  display: flex;
  flex-direction: column;
  padding: 12px;
}

/* .vertical-wrapper > * {
  margin-bottom: 72px;
}
.vertical-wrapper > last-child {
  margin-bottom: 0;
} */

.card-wrapper {
  transition: all 0.3 ease-in-out;
  min-height: calc(100vh - 100px);
}
</style>
